﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxChart Custom x-Axis Range example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            // prepare chart data as an array
            var sampleData = [
                    { Hour: 1, Sales: 135 },
                    { Hour: 3, Sales: 145 },
                    { Hour: 5, Sales: 90 },
                    { Hour: 15, Sales: 66 },
                    { Hour: 17, Sales: 43 },
                    { Hour: 18, Sales: 122 },
                    { Hour: 22, Sales: 59 },
                    { Hour: 23, Sales: 70 }
                ];

            // prepare jqxChart settings
            var settings = {
                title: "Average store sales per hour",
                description: "",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                colorScheme: 'scheme02',
                xAxis:
                {
                    dataField: 'Hour',
                    minValue: 0,
                    maxValue: 23,
                    unitInterval: 1,
                    valuesOnTicks: false,
                    labels: {
                        angle: 0,
                        formatFunction: function (value) {
                            return value.toString();
                        }
                    },
                    tickMarks: {
                        visible: true,
                        interval: 1
                    },
                    gridLines: {
                        visible: true,
                        interval: 3
                    }
                },
                valueAxis:
                {
                    visible: true,
                    minValue: 0,
                    maxValue: 200,
                    unitInterval: 50,
                    title: { text: 'Sales ($)<br>' },
                    labels: { horizontalAlignment: 'right' }
                },
                seriesGroups:
                    [
                        {
                            type: 'column',
                            series: [
                                    { dataField: 'Sales', displayText: 'Sales', showLabels: true }
                                ]
                        }
                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width:850px; height:500px">
    </div>
</body>
</html>
